/*
 * @Date: 2022-03-29 11:43:49
 * @LastEditors: fenglan
 * @LastEditTime: 2022-03-29 12:45:14
 * @FilePath: /payment/pay/src/pages/Agency/AgencyOrder.jsx
 */
import React from 'react';
import axios from '../../util/axios';
import Tab from '../../components/Tabs';
import Export from '../../components/Export/index';
import zhCN from "antd/es/locale/zh_CN";
import HocBUtton from '../../components/HOC/HocButton/CommonButton';
import { useState, useEffect } from 'react';
import {
  Input,
  Modal,
  Button,
  Form,
  Select,
  Table,
  DatePicker,
  ConfigProvider,
  Row,
  Col,
} from 'antd';

import { SearchOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};


export default function Agency () {
  //进入页面请求数据渲染页面
  // useEffect(() => {

  //   axios.get('http://172.16.106.189:8080/daiFuDingDan?limit=5&page=1&shangHu=test').then(
  //     response => { console.log('成功了', response.data); },
  //     error => { console.log('失败了', error); }
  //   )

  // })


  //搜索
  const onSubmit = (fieldsValue) => {
    const rangeValue = fieldsValue['起止时间']

    const values = {
      ...fieldsValue,
      '起止时间': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
    }
    console.log(rangeValue);
    console.log(fieldsValue);
    console.log(values);
  };




  // const onFinishFailed = (errorInfo) => {
  //   console.log('Failed:', errorInfo);
  // };
  // const SearchOnclick = () => {
  //   console.log(111);
  // }

  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const [twoisModalVisible, twosetIsModalVisible] = useState(false);
  const twoshowModal = () => {
    twosetIsModalVisible(true);
  };

  const twohandleOk = () => {
    twosetIsModalVisible(false);
  };

  const twohandleCancel = () => {
    twosetIsModalVisible(false);
  };
  const [threeisModalVisible, threesetIsModalVisible] = useState(false);
  const threeshowModal = () => {
    threesetIsModalVisible(true);
  };

  const thrhandleOk = () => {
    threesetIsModalVisible(false);
  };

  const thrhandleCancel = () => {
    threesetIsModalVisible(false);
  };

  const data = [
    {
      key: '1',
      card: 'SH_20220330102955534929', //商户订单号
      name: '123456', //商户名称
      bankname: '111',//银行名称
      bankcard: '1231',//银行卡号
      payeename: 'zzz',//收款人姓名
      amountpaid: 5555,//实付金额
      paystate: '未处理',//代付状态
      createtime: '2022-03-30 10:29:55',//创建时间
      accepttime: '2022-03-30 10:29:55',//受理时间
      paytime: '2022-03-30 10:29:55',//代付时间
      callbacktime: '2022-03-30 10:29:55',//回调时间
      acceptpeopie: 'zzz'//受理人
    },
    {
      key: '2',
      card: 'SH_20220330102955534929',
      name: '123456',
      bankname: '111',
      bankcard: '1231',
      payeename: 'zzz',
      amountpaid: 5555,
      paystate: '已审核',
      createtime: '2022-03-30 10:29:55',
      accepttime: '2022-03-30 10:29:55',
      paytime: '2022-03-30 10:29:55',
      callbacktime: '2022-03-30 10:29:55',
      acceptpeopie: 'zzz'
    },
    {
      key: '3',
      card: 'SH_20220330102955534929',
      name: '123456',
      bankname: '111',
      bankcard: '1231',
      payeename: 'zzz',
      amountpaid: 5555,
      paystate: '已代付',
      createtime: '2022-03-30 10:29:55',
      accepttime: '2022-03-30 10:29:55',
      paytime: '2022-03-30 10:29:55',
      callbacktime: '2022-03-30 10:29:55',
      acceptpeopie: 'zwy'
    },
  ];
  function Show (category) {
    console.log(category);
  }
  const { Option } = Select;
  const columns = [

    {
      title:
        '商户订单号',
      dataIndex: 'card',
      key: '1',
      fixed: 'left',
      width: 250,
      align: 'center'
    },
    { title: '商户名称', dataIndex: 'name', key: '2', width: 120, align: 'center' },
    { title: '银行名称', dataIndex: 'bankname', key: '3', width: 120, align: 'center' },
    { title: '银行卡号', dataIndex: 'bankcard', key: '4', width: 200, align: 'center' },
    { title: '收款人姓名', dataIndex: 'payeename', key: '5', width: 120, align: 'center' },
    { title: '实付金额', dataIndex: 'amountpaid', key: '6', width: 120, align: 'center' },
    {
      title: '代付状态', dataIndex: 'paystate', key: '7', width: 120, align: 'center',
      render: (text, record, index) => {
        return record.paystate === '未处理' ? <span style={{ color: 'blue' }}>未处理</span> : record.paystate === '已审核' ? <span style={{ color: 'greenyellow' }}>已处理</span> : record.paystate === '已代付' ? <span style={{ color: 'green' }}>已代付</span> : ''


      }
    },


    { title: '创建时间', dataIndex: 'createtime', key: '8', width: 200, align: 'center' },
    { title: '受理时间', dataIndex: 'accepttime', key: '9', width: 200, align: 'center' },
    { title: '代付时间', dataIndex: 'paytime', key: '10', width: 200, align: 'center' },
    { title: '回调时间', dataIndex: 'callbacktime', key: '11', width: 200, align: 'center' },
    { title: '受理人', dataIndex: 'acceptpeopie', key: '12', width: 120, align: 'center' },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 250,

      render: (text, record, index) => {
        return record.paystate === '未处理' ?
          <div>
            <HocBUtton handlerClick={twoshowModal} buttonName='受理' className='yellow myWidth' size='lager' />
            <HocBUtton handlerClick={showModal} buttonName='查看' className='green myWidth' size='lager' />
          </div>
          : record.paystate === '已审核' ?
            <div>

              <HocBUtton handlerClick={threeshowModal} buttonName='审批' className='red myWidth' size='lager' />
              <HocBUtton handlerClick={showModal} buttonName='查看' className='green myWidth' size='lager' />
            </div>
            : record.paystate === '已代付' ?
              <HocBUtton handlerClick={showModal} buttonName='查看' className='green myWidth' size='lager' /> : ''
      },
      // category







    },
  ];

  return (
    <>
      <div>
        <Tab title={'代付代理订单'} />
      </div>
      <ConfigProvider locale={zhCN}>
        <Form
          name="form_search"
          layout='inline'
          size='large'
          onFinish={onSubmit}
          // onFinishFailed={onFinishFailed}
          initialValues={{ merchant: '全部商户', order_state: '订单状态', call_back: '回调状态' }}
        >
          <Col span={5}>
            <Form.Item name='order-number'>
              <Input placeholder="系统性订单号/代付订单号" />
            </Form.Item>
          </Col>

          <Col span={3}>
            <Form.Item name="merchant">
              <Select>
                <Option value="全部商户">全部商户</Option>
                <Option value="123456">123456</Option>
                <Option value="test1">test1</Option>
                <Option value="test123">test123</Option>
              </Select>
            </Form.Item>
          </Col>

          <Col span={3}>
            <Form.Item name="order_state">
              <Select>
                <Option value="订单状态" >订单状态</Option>
                <Option value="未代付" >未代付</Option>
                <Option value="已审核">已审核</Option>
                <Option value="转账中">转账中</Option>
                <Option value="已代付">已代付</Option>
                <Option value="已拒绝">已拒绝</Option>
              </Select>
            </Form.Item>
          </Col>


          <Col span={3}>
            <Form.Item name="order_time">
              <Input placeholder="入单时间:" disabled="disabled" /> </Form.Item>
          </Col>

          <Col span={7}>
            <Form.Item name='起止时间' >
              <RangePicker locale={zhCN} />
            </Form.Item>
          </Col>

          <Col span={3}>
            <Form.Item name="call_back">
              <Select>
                <Option value="回调状态" >回调状态</Option>
                <Option value="已回调">已回调</Option>
                <Option value="未回调">未回调</Option>
                <Option value="已失败">已失败</Option>
              </Select>
            </Form.Item>
          </Col>
          <br />
          <br />
          <Col span={5}>
            <Form.Item name="payee">
              <Input placeholder="收款人" />
            </Form.Item>
          </Col>


          <Col span={2}>
            <Form.Item >
              <Button type="primary" htmlType='submit' icon={<SearchOutlined />}  >
                搜索
              </Button>
            </Form.Item>
          </Col>


          <Col span={2}>
            <Form.Item name="zzz">
              <Export data={data} header={columns} fileName='代理订单.xlsx' />
            </Form.Item>
          </Col>
        </Form>



        <br />
        {/* <Row>
        <Col span={24}>

          <Col span={2}>交易笔数</Col>
          <Col span={4}><Input disabled placeholder='4/4' /></Col>


        </Col>
        <Col span={2}>交易金额</Col>
        <Col span={4}><Input disabled placeholder='411/411元' /></Col>
      </Row> */}
        <div>交易笔数 <Input style={{ width: '10%', marginBottom: 10, marginLeft: 10, marginRight: 10 }} disabled="disabled" value="4/4" />
          交易金额 <Input style={{ width: '10%', marginLeft: 10 }} disabled="disabled" value="411/411元" />
        </div>


        <Table pagination={{ showSizeChanger: true, showQuickJumper: true }}
          columns={columns} dataSource={data} scroll={{ x: 2000 }} rowSelection={{
            type: 'checkbox',
            ...rowSelection,
          }} />
      </ConfigProvider>

      {/* 模态框 */}
      <Modal title="基本信息" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} width={1000} centered>
        <Row>
          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>系统订单号</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>商户订单号</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>

          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>商户名称</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>银行名称</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>银行卡号</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>持卡人姓名</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>手续费</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>实付金额</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>代付通道</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>订单状态</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>回调状态</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>回调地址</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>

          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>商户备注</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>系统备注</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>代付时间</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
          <Col style={{ display: 'flex', textAlign: 'center', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>回调时间</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>

          <Col style={{ display: 'flex', marginTop: 10 }} span={12}>
            <span style={{ flex: 1 }}>创建时间</span>
            <span style={{ flex: 3 }}>
              <Input defaultValue="" placeholder="DF20220330152908890380" disabled="disabled" />
            </span>
          </Col>
        </Row>
      </Modal>

      <Modal title="信息" visible={twoisModalVisible} onOk={twohandleOk} onCancel={twohandleCancel} width={300} centered>
        <p>请处理完订单再受理</p>
      </Modal>

      <Modal title="审核订单" visible={threeisModalVisible} onOk={thrhandleOk} onCancel={thrhandleCancel} width={1000} centered okText='成功' cancelText='失败'>
        <p>系统备注</p>
        <Input.TextArea />
      </Modal>
    </>
  )
}



